<template>
	<div>
		<el-form :inline="true" ref="refAddCaseForm" :model="formInlineCase" size="mini" :rules="rules" label-width="100px">
			<el-row>
				<el-col :span="24" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="mb15">
					<el-form-item label="案件名称" prop="caseName" style="width: 100%">
						<el-input v-model="formInlineCase.caseName" placeholder="请输入..."></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
					<el-form-item label="案件编号" prop="caseNo">
						<el-input v-model="formInlineCase.caseNo" placeholder="请输入..."></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
					<div style="display: flex;">
						<el-form-item label="关联编号" style="margin-bottom:0;">
							<el-input v-model="formInlineCase.inspectionNo" placeholder="请输入..."></el-input>
						</el-form-item>
						<div style="width:155px;" v-if="!formInlineCase.id">
							<el-button type="warning" @click="useHistory">复用</el-button>
							<el-button @click="dialogShow = true">查询</el-button>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
					<el-form-item label="案件类别" prop="caseTypeCode">
						<el-select filterable v-model="formInlineCase.caseTypeCode" placeholder="请选择...">
							<el-option v-for="item in ajlbs" :key="item.value" :label="item.label" :value="item.value"> </el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
					<el-form-item label="案发时间">
						<el-date-picker v-model="formInlineCase.caseTime" format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" type="date" placeholder="请选择...">
						</el-date-picker>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
					<el-form-item label="主办人" prop="hostUserName">
						<el-select filterable :allow-create="true" v-model="formInlineCase.hostUserName" placeholder="请选择...">
							<el-option v-for="item in tqrs" :key="item.label" :label="item.label" :value="item.label"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12" :xs="10" :sm="10" :md="10" :lg="10" :xl="10" class="mb15">
					<el-form-item label="主办单位" prop="hostUserOrganName">
						<el-select filterable :allow-create="true" v-model="formInlineCase.hostUserOrganName" placeholder="请选择...">
							<el-option v-for="item in tqdws" :key="item.label" :label="item.label" :value="item.label"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="mb15">
					<el-form-item label="案发地点">
						<el-input v-model="formInlineCase.casePlace" placeholder="请输入..."></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24" :xs="20" :sm="20" :md="20" :lg="20" :xl="20" class="mb15">
					<el-form-item label="简要案情" style="width: 100%">
						<el-input v-model="formInlineCase.briefCase" type="textarea" placeholder="请输入..."></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<el-dialog v-model="dialogShow" title="案件查询" :width="1000" @close="dialogShow=false" destroy-on-close center>
			<caseHistory @succ="setDataFromHistory" :ajlbs="ajlbs"/>
		</el-dialog>
	</div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { queryCaseHistory } from '/@/api/case/index';
import caseHistory from '/@/views/evidence/add/component/history.vue';
export default defineComponent({
	name: 'addCase',
	components: { caseHistory },
	props: {
		formInline: Object,
		options: Object
	},
	activated() {
		this.formInlineCase = this.$props.formInline;
		//this.formInlineCase.caseTime = new Date();
	},
	setup(props) {
		const state = reactive({
			rules: {
				caseName: [
					{
						required: true,
						message: '请输入案件名称',
						trigger: 'change',
					},
				],
				caseNo: [
					{
						required: false,
						message: '请输入案件编号',
						trigger: 'change',
					},
				],
		/*		caseTime: [
					{
						type: 'date',
						required: true,
						message: '请选择发案时间',
						trigger: 'change',
					}], */
					caseTypeCode: [
					{
						required: false,
						message: '请选择案件类别',
						trigger: 'change',
					}],
					hostUserName: [
					{
						required: false,
						message: '请选择主干民警',
						trigger: 'change',
					}],
					hostUserOrganName: [
					{
						required: false,
						message: '请选择主办单位',
						trigger: 'change',
					}],
			},
			dialogShow:false
		});
		const refAddCaseForm = ref();
		const formInlineCase = props.formInline;
		//formInlineCase.caseTime = new Date();
		
		function useHistory() {
			if(!formInlineCase.inspectionNo){
				ElMessage({ message: '请输入关联编号', type: 'warning' });
				return 
			}
			queryCaseHistory({JJBH : formInlineCase.inspectionNo }).then((res:any) => {
				if (res.success) {
					setDataFromHistory(res.data[0]);
				}else{
					ElMessage({ message: '关联编号不存在', type: 'warning' });
				}
			})
		}
		function setDataFromHistory(data: any) {
			state.dialogShow = false;
			/*
			 01案件名称、AJMC
			 02案件编号、ASJBH
			 03关联编号、JJBH
			 04案件类别、AJLBDM（需要对应中文）
			 05案发时间、FXASJSJ
			 06主办人、 ZBR_XM
			 07主办单位、（BADW_GAJGJGDM   BADW_GAJGMC） 12位区划编号  单位名称
			 08案发地点、ASJFSDD_DZID（需要确认）
			 09简要案情，JYAQ
			*/
			formInlineCase.caseName = data.AJMC;
			formInlineCase.caseNo = data.ASJBH;
			formInlineCase.inspectionNo = data.JJBH;
			if(data.AJLBDM){
				let _first = props.options.ajlbs.find(v=>v.code == data.AJLBDM);
				if(_first){
					formInlineCase.caseTypeCode = _first.label;
				}
			}
			formInlineCase.caseTime = data.FXASJSJ;
			formInlineCase.hostUserName = data.ZBR_XM;
			//formInlineCase.hostUserOrganName = data.BADW_GAJGMC;
			if(data.BADW_GAJGJGDM){
				let _first = props.options.tqdws.find(v=>v.comNo == data.BADW_GAJGJGDM);
				if(_first){
					formInlineCase.hostUserOrganName = _first.label;
				}
			}
			formInlineCase.casePlace = data.ASJFSDD_DZID;
			formInlineCase.briefCase = data.JYAQ;
		}
		return {
			formInlineCase,
			refAddCaseForm,
			useHistory,
			setDataFromHistory,
			...toRefs(props.options),
			...toRefs(state),
		};
	},
});
</script>

<style scoped>
.el-col {
	border: 0px solid red;
}
.el-form-item,
.el-select,
.el-date-picker {
	width: 100%;
}
</style>
